<template>
  <div class="item-box">
    <!-- <div class="heard hw-box-style-flex hw-box-style-flex-r-center">
      <p class="heard-title1">图片设置</p>
    </div> -->
    <div class="item-content">
      <t-collapse expand-icon-placement="right" :defaultExpandAll="true">
        <t-collapse-panel :value="1" v-if="configList.LogoShow">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title2">展览LOGO</span>
            </div>
          </template>
          <template #default>
            <t-loading size="small" :loading="logoshow" v-if="parmas.logo">
              <t-upload
                ref="uploadRef3"
                :before-upload="beforeUpload"
                theme="custom"
                accept=".png,.jpg,.jpeg"
                :auto-upload="true"
                :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                @fail="handleFail"
              >
                <div class="upload-item-img upload-item-img1 hw-click-cursor upload-item hw-flex-style-c-c">
                  <div class="icon-box">
                    <previewIcon
                      :url="parmas.logo"
                      :deleteIconFlag="false"
                      @update="update(parmas.logo, 1)"
                    ></previewIcon>
                  </div>

                  <img :src="urls + parmas.logo" alt="" />
                </div>
              </t-upload>
            </t-loading>
            <t-loading size="small" :loading="logoshow" v-else>
              <t-upload
                ref="uploadRef3"
                :before-upload="beforeUpload"
                theme="custom"
                accept=".png,.jpg,.jpeg"
                :auto-upload="true"
                :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                @fail="handleFail"
              >
                <div class="upload-parent">
                  <div
                    v-if="parmas.logo"
                    class="upload-item-img1 upload-item-img hw-click-cursor upload-item hw-flex-style-c-c"
                  >
                    <img :src="urls + parmas.logo" alt="" />
                  </div>
                  <div v-else class="upload-item-img1 hw-click-cursor upload-item hw-flex-style-c-c">
                    <t-icon name="add" size="24" style="color: #141414"></t-icon>
                    <span class="upload-title1">点击上传图片</span>
                  </div>
                </div>
              </t-upload>
            </t-loading>
            <div class="upload-tips">
              <t-icon name="error-circle" size="16" style="color: 'rgba(0, 0, 0, 0.38)'"></t-icon>
              <span> 限500KB以内JPG、PNG图片，推荐400*100像素</span>
            </div>
          </template>
        </t-collapse-panel>
        <t-collapse-panel :value="2" v-if="configList.banner">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title2">展览海报</span>
            </div>
          </template>
          <template #default>
            <div class="swiper-box">
              <div class="swiper-item">
                <t-loading size="small" :loading="swiperShow">
                  <t-upload
                    v-if="parmas.image.length > 0 && parmas.image[0]?.url"
                    :loading="loading"
                    ref="uploadRef2"
                    :max="1"
                    :before-upload="beforeUploadSwiper"
                    theme="custom"
                    accept=".png,.jpg,.jpeg"
                    :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                    @fail="handleFail"
                  >
                    <div class="swiper-item-img swiper-item-ok">
                      <div class="item-ok-delet">
                        <!-- <div @click.stop="lookcoverUrl(parmas.image[0].url)">
                        <i class="doorIcon">&#xe63b;</i>
                      </div>

                      <div @click="delImg(0)">
                        <i class="doorIcon">&#xe634;</i>
                      </div> -->
                        <previewIcon
                          :url="parmas.image[0].url"
                          :deleteIconFlag="false"
                          @update="update(parmas.image, 2)"
                        ></previewIcon>
                      </div>
                      <img :src="urls + parmas.image[0].url" alt="" />
                    </div>
                  </t-upload>
                  <t-upload
                    v-else
                    :loading="loading"
                    ref="uploadRef2"
                    :max="1"
                    :before-upload="beforeUploadSwiper"
                    theme="custom"
                    accept=".png,.jpg,.jpeg"
                    :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                    @fail="handleFail"
                  >
                    <div>
                      <div class="hw-click-cursor upload-item-swiper hw-flex-style-c-c">
                        <t-icon name="add" size="24" style="color: #141414"></t-icon>
                        <span class="upload-title1">点击上传图片</span>
                      </div>
                      <!-- <div class="upload-title2">建议尺寸：1920*900</div> -->
                    </div>
                  </t-upload>
                </t-loading>
                <div class="swiper-item-title">PC端海报</div>
              </div>
              <div class="swiper-item">
                <t-loading size="small" :loading="wapSwiperShow">
                  <t-upload
                    v-if="parmas.wapImage.length > 0 && parmas.wapImage[0]?.url"
                    :loading="loading"
                    ref="uploadRef2"
                    :max="1"
                    :before-upload="beforeUploadWapSwiper"
                    theme="custom"
                    accept=".png,.jpg,.jpeg"
                    :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                    @fail="handleFail"
                  >
                    <!-- <span class="swiper-item-title">{{ index < 9 ? '0' + (index + 1) : index + 1 }}</span> -->
                    <div class="swiper-item-img swiper-item-ok">
                      <div class="item-ok-delet">
                        <!-- <div @click.stop="lookcoverUrl(parmas.wapImage[0].url)">
                        <i class="doorIcon">&#xe63b;</i>
                      </div> -->
                        <previewIcon
                          :url="parmas.wapImage[0].url"
                          :deleteIconFlag="false"
                          @update="update(parmas.wapImage, 3)"
                        ></previewIcon>
                      </div>
                      <img :src="urls + parmas.wapImage[0].url" alt="" />
                    </div>
                    <!-- <div v-else class="hw-flex-style-c-c-c swiper-item-img">
                <t-loading size="small" text=""></t-loading>
                <span class="upload-loading-text">上传中{{ parmas.image[0].status }}%</span>
              </div> -->
                  </t-upload>
                  <t-upload
                    v-else
                    :loading="loading"
                    ref="uploadRef2"
                    :max="1"
                    :before-upload="beforeUploadWapSwiper"
                    theme="custom"
                    accept=".png,.jpg,.jpeg"
                    :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                    @fail="handleFail"
                  >
                    <div>
                      <div class="hw-click-cursor upload-item-swiper hw-flex-style-c-c">
                        <t-icon name="add" size="24" style="color: #141414"></t-icon>
                        <span class="upload-title1">点击上传图片</span>
                      </div>
                      <!-- <div class="upload-title2">建议尺寸：1920*900</div> -->
                    </div>
                  </t-upload>
                </t-loading>
                <div class="swiper-item-title">移动端海报</div>
              </div>
            </div>
            <div class="swiper-tips">
              <t-icon name="error-circle" size="14" style="color: 'rgba(0, 0, 0, 0.38)'"></t-icon>
              <div>
                <div>支持2M以内JPG、PNG图片。</div>
                <div>PC端推荐1920*1080以上分辨率。</div>
                <div>移动端推荐750*1334以上分辨率。</div>
                <div>如不传移动端海报，移动端会使用PC端海报进行展示。</div>
              </div>
            </div>
          </template>
        </t-collapse-panel>
      </t-collapse>
    </div>
    <!-- <t-image-viewer v-model:visible="IMGvisible" :images="[urls + imageUrl]"> </t-image-viewer> -->
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { projectImg, projectDetail } from '@/api/project/project';
import COS from 'cos-js-sdk-v5';
import { getCloud } from '@/api/upLoad/index';
import { MessagePlugin } from 'tdesign-vue-next';
import { upLoadFn } from '@/utils/request/upload';
import { ref, reactive, nextTick, onMounted } from 'vue';
import { heards, url, urls } from '@/utils/request/upload';
import { useProjectStore } from '@/store';
import { useRouter } from 'vue-router';
import { updateProject } from '@/api/project/project';
import previewIcon from './upload.vue';
const store = useProjectStore();
const lookShow = ref(false);
const router = useRouter();
const webNumber = ref(false);
const wapNumber = ref(false);
const uploadAllFilesInOneRequest = ref(false);
const loading = ref(false);
const logoshow = ref(false);
const swiperShow = ref(false);
const wapSwiperShow = ref(false);
const parmas = reactive({
  image: [],
  wapImage: [],
  logo: '',
});
const configList = ref({
  LogoShow: true, //logo上传功能
  banner: true, //轮播图功能
  wapBanner: true, //移动端轮播图上传
});
const IMGvisible = ref(false);
const imageUrl = ref('');
// parmas.logo = store.styleInfo.logo;
const init = async () => {
  try {
    let res = await projectDetail(localStorage.getItem('projectId'));
    parmas.logo = res.data.logoUrl;
    parmas.image = [{ url: res.data.coverUrl }];
    parmas.wapImage = [{ url: res.data.wapCoverUrl }];
    window.document.title = res.data.name;
    store.setDigitalShowroom(res.data.digitalShowroom);
  } catch {}
};

onMounted(() => {
  init();
});
store.setBanner(parmas.image);
store.setWapBanner(parmas.wapImage);
const looklOGO = () => {};
const setImagelist = () => {
  projectImg(localStorage.getItem('projectId')).then((res) => {
    // console.log(res.data.coverUrl);
    if (!res.data.coverUrl) {
      return;
    }
    let obj = {
      url: res.data.coverUrl,
      type: 1,
      link: '',
      name: res.data.coverUrl,
      status: 0,
    };
    // console.log(obj, 123);

    parmas.image.push(obj);
    nextTick(() => {
      store.setBanner(parmas.image);
    });
  });
};

onMounted(() => {
  if (parmas.image.length == 0) {
    setImagelist();
  }
});
// const onSuccess1 = (e: any) => {
//   parmas.logo = e.response.data;
//   store.setLogo(String(parmas.logo));
// };
const beforeUpload = (file: any) => {
  //回调钩子
  console.log(file.size);

  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (
    file.type !== 'image/gif' &&
    file.type !== 'image/png' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/bmp'
  ) {
    MessagePlugin.error('上传文件格式错误');
    return;
  }
  if (file.size > 500 * 1024) {
    MessagePlugin.error('上传大小超出500k限制');
    return;
  }
  logoshow.value = true;
  upLoadFn(file, 5).then((res: any) => {
    // console.log(res);
    if (res) {
      parmas.logo = res;
      store.setLogo(parmas.logo);
      // formData.coverUrl = res;
      updateProject({ logoUrl: res }, localStorage.getItem('projectId')).then((res) => {
        // console.log(res, 'res-----');
      });
    } else {
      MessagePlugin.error('创建成功');
    }
    logoshow.value = false;
  });
};
const beforeUploadSwiper = (file: any) => {
  //回调钩子
  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1000000 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  if (webNumber.value) {
    return;
  }
  webNumber.value = true;
  swiperShow.value = true;
  swiperLoad(file);
};
const beforeUploadWapSwiper = (file: any) => {
  //移动端上传封面
  //回调钩子
  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1000000 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  if (wapNumber.value) {
    return;
  }
  wapNumber.value = true;
  wapSwiperShow.value = true;
  WapswiperLoad(file);
};

const swiperLoad = (file: any) => {
  let name = file.name.split('.');
  let fomart = name[1];

  getCloud(fomart, 5).then((res: any) => {
    // console.log(res.data);
    let obj = {
      url: '',
      type: 1,
      link: '',
      name: res.data.fileName,
      status: 0,
    };
    parmas.image.push(obj);
    webNumber.value = false;
    const cos = new COS({
      getAuthorization: function (options, callback) {
        callback({
          TmpSecretId: res.data.tmpSecretId,
          TmpSecretKey: res.data.tmpSecretKey,
          XCosSecurityToken: res.data.token,
          StartTime: res.data.startTime,
          ExpiredTime: res.data.expiredTime,
        });
      },
    });
    cos.putObject(
      {
        Bucket: res.data.bucket /* 存储桶 */,
        Region: res.data.region /* 存储桶所在地域，必须字段 */,
        Key: res.data.fileName /* 文件名 */,
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: file.raw, // 上传文件对象
      },
      (err, data) => {
        // console.log(err || data);
        if (data.statusCode === 200) {
          // let indexs = parmas.image.findIndex((el) => {
          //   return el.name == res.data.fileName;
          // });
          parmas.image[0].url = res.data.fileName;
          swiperShow.value = false;
          nextTick(() => {
            store.setBanner(parmas.image);
          });
          updateProject({ coverUrl: res.data.fileName }, localStorage.getItem('projectId')).then((res) => {
            console.log(res, 'res-----');
          });
        }
      },
    );
  });
};

const WapswiperLoad = (file: any) => {
  //移动端轮播上传钩子
  let name = file.name.split('.');
  let fomart = name[1];

  getCloud(fomart, 5).then((res: any) => {
    // console.log(res.data);
    let obj = {
      url: '',
      type: 1,
      link: '',
      name: res.data.fileName,
      status: 0,
    };
    parmas.wapImage.push(obj);
    wapNumber.value = false;
    const cos = new COS({
      getAuthorization: function (options, callback) {
        callback({
          TmpSecretId: res.data.tmpSecretId,
          TmpSecretKey: res.data.tmpSecretKey,
          XCosSecurityToken: res.data.token,
          StartTime: res.data.startTime,
          ExpiredTime: res.data.expiredTime,
        });
      },
    });
    cos.putObject(
      {
        Bucket: res.data.bucket /* 存储桶 */,
        Region: res.data.region /* 存储桶所在地域，必须字段 */,
        Key: res.data.fileName /* 文件名 */,
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: file.raw, // 上传文件对象
      },
      (err, data) => {
        // console.log(err || data);
        if (data.statusCode === 200) {
          // let indexs = parmas.wapImage.findIndex((el) => {
          //   return el.name == res.data.fileName;
          // });
          parmas.wapImage[0].url = res.data.fileName;
          wapSwiperShow.value = false;
          nextTick(() => {
            store.setWapBanner(parmas.wapImage);
          });
          updateProject({ wapCoverUrl: res.data.fileName }, localStorage.getItem('projectId')).then((res) => {
            // console.log(res, 'res-----');
          });
        }
      },
    );
  });
};

const handleFail = (e: any) => {};
// const onSuccessSwiper = (e: any) => {
//   parmas.image.forEach((el) => {
//     // console.log(el.name, e.file.name);
//     if (el.name == e.file.name) {
//       el.url = String(e.response.data);
//     }
//   });

// };
const lookcoverUrl = (url: string) => {
  IMGvisible.value = true;
  imageUrl.value = url;
};
// const delimglOGO = () => {
//   parmas.logo = '';
//   store.setLogo(parmas.logo);
// };
const update = (url: string, type: number) => {
  // console.log(url, type);

  switch (type) {
    case 1:
      parmas.logo = '';
      store.setLogo('');
      updateProject({ logoUrl: '' }, localStorage.getItem('projectId')).then((res) => {
        if (res.data) {
          MessagePlugin.success('删除成功');
        }
      });
      break;
    case 2:
      parmas.image.splice(0, 1);
      store.setBanner([]);
      updateProject({ coverUrl: '' }, localStorage.getItem('projectId')).then((res) => {
        if (res.data) {
          MessagePlugin.success('删除成功');
        }
      });
      break;
    case 3:
      parmas.wapImage.splice(0, 1);
      store.setWapBanner([]);
      updateProject({ wapCoverUrl: '' }, localStorage.getItem('projectId')).then((res) => {
        if (res.data) {
          MessagePlugin.success('删除成功');
        }
      });
      break;

    default:
      break;
  }
};
// const delImg = (e: number) => {
//   nextTick(() => {
//     parmas.image.splice(e, 1);
//     store.setBanner(parmas.image);
//   });
// };
// const WapdelImg = (e: number) => {
//   nextTick(() => {
//     parmas.wapImage.splice(e, 1);
//     store.setWapBanner(parmas.wapImage);
//   });
// };

const Progress = (options: any) => {
  parmas.image.forEach((el) => {
    el.status = options.percent;
  });
};
const pathBlank = () => {
  // /prijectMenu/plan
  router.push({ path: '/prijectMenu/plan', query: { projectId: localStorage.getItem('projectId') } });
};
</script>

<style lang="less" scoped>
@import './index.less';

.upload-item {
  flex-direction: column;
  width: 268px;
  height: 168px;
  background: #fafafa;
  border-radius: 3px;
  border: 1px dashed #ebe4e3;
  img {
    width: 100%;
    height: 100px;
  }
}
.upload-item-img1 {
  width: 200px;
  height: 100px;
  margin-bottom: 4px;
}
.upload-item-img1:hover {
  border: 1px dashed #ebe4e3;
}
.upload-item-swiper {
  flex-direction: column;
  width: 142px;
  height: 142px;
  background: #fafafa;
  border-radius: 3px;
  // margin-top: 16px;
  border: 1px dashed #ebe4e3;
}
.upload-title1 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  color: rgba(0, 0, 0, 0.38);
  line-height: 20px;
  margin-top: 8px;
}
.upload-title2 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-top: 4px;
}
.upload-loading-text {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 20px;
}
.swiper-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.swiper-tips {
  display: flex;
  justify-content: center;
  color: rgba(0, 0, 0, 0.38);
  font-family: 'PingFang SC';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 0 20px;
  .t-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    margin-right: 4px;
  }
  :deep(div) {
    font-size: 14px;
  }
}
.swiper-item {
  width: 142px;
  // height: 142px;
  // padding-right: 16px;
  // margin-bottom: 16px;
}
.swiper-item-title {
  color: rgba(0, 0, 0, 0.38);
  font-family: 'PingFang SC';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  margin-top: 4px;
  margin-bottom: 10px;
  line-height: 22px; /* 157.143% */
}
.swiper-item-img {
  position: relative;
  width: 100%;
  height: 142px;
  background: #eeeeee;
  border-radius: 3px;
  border: 1px dashed #ebe4e3;
  border-spacing: 5px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    object-fit: contain;
    background: #fafafa;
  }
}
.swiper-item-img:hover {
  .item-ok-delet {
    opacity: 1;
  }
}
.item-ok-delet {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0px;
  right: 0px;
  opacity: 0;
  // background: rgba(0, 0, 0, 0.4);
  > div {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    margin-right: 8px;
    margin-top: 6px;
    cursor: pointer;
  }
  i {
  }
}
.title2 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
:deep(.t-collapse-panel__content) {
  padding-bottom: 16px;
}
:deep(.t-collapse-panel__content) {
  padding: 20px 0px !important;
  padding-top: 0px !important;
}
:deep(.t-collapse-panel) {
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  &:last-child {
    box-shadow: none;
  }
}
.upload-item-img {
  position: relative;
  width: 140px;
  height: 100px;
  margin-left: 20px;
  img {
    position: relative;
    z-index: 50;
  }
}

.icon-box {
  display: flex;
  // align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 24px;
  opacity: 0;
  z-index: 66;
  // background: rgba(0, 0, 0, 0.4);

  > div {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    margin-right: 8px;
    margin-top: 6px;
  }
}
.img-boxs-solid {
  width: 1px;
  height: 20px;
  background: #fff;
  margin: 0 12px;
}
.upload-item-img:hover {
  .icon-box {
    opacity: 1;
  }
}
.item-content {
  box-shadow: none;
}
.item-content {
  padding-top: 0;
}
:deep(.t-collapse-panel__content) {
  // box-shadow: inset 1px 0px 0px 0px #f0f0f0;
}
.upload-item-img1 {
  width: 307px !important;
  height: 78px !important;
  img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
}
.upload-icon-parent {
  position: relative;
  padding: 0 8px;
  margin: 0 8px;
  .left-solid {
    position: absolute;
    left: 0;
    top: calc(50% - 6px);
    width: 1px;
    height: 12px;
    background: #fff;
  }
  .right-solid {
    position: absolute;
    right: 0;
    top: calc(50% - 6px);
    width: 1px;
    height: 12px;
    background: #fff;
  }
}
:deep(.t-loading__parent) {
  width: 100%;
  min-height: 100%;
  height: 100%;
}
.wap-swiper-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 268px;
}
.wap-swiper-width {
  width: 128px !important;
}
.upload-tips {
  color: rgba(0, 0, 0, 0.38);
  font-family: 'PingFang SC';
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 8px;
  margin-left: 20px;
  > span {
    vertical-align: middle;
  }
}
:deep(.t-upload__trigger) {
  width: 100%;
}
:deep(.t-loading--full) {
  z-index: 99;
}
.upload-parent {
  display: flex;
  justify-content: center;
  width: 100%;
}
</style>
